
<template>
  <div class="map_container">
    <div style="height:50px">
      实现散点图效果
    </div>
    <div
      style="height:calc(100% - 50px)"
      ref="echart"
    ></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      let echart = this.$echarts.init(this.$refs.echart);
      let geojson = require('@/geojson/中国.json');
      this.$echarts.registerMap('chinaMap', geojson); //注意：这里使用的是【this.$echarts】
      let scatterData = [
        //散点坐标
        {
          value: [117, 31],
        },
      ];
      let option = {
        geo: {
          type: 'map', //类型是地图
          map: 'chinaMap', //和[registerMap]中注册的保持一致
          roam: true, //允许鼠标拖动和缩放
          label: {
            show: true, //显示省名称
          },
          zoom: 1, //默认为1，即不放大，依次递增
          center: [116.407387, 39.904179], //设置地图中心点
        },
        series: [
          {
            type: 'effectScatter', //为series指明这是地图
            coordinateSystem: 'geo', //指明散点使用坐标系为【geo】
            rippleEffect: {
              scale: 10, //设置涟漪动画效果半径大小
            },
            data: scatterData,
          },
        ],
      };
      echart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.map_container {
  height: 100%;
  padding: 15px;
}
</style>